import { Component } from "react";
import { LgDrawer, FooterCenter } from "../../components/simple";
import leftImg from "../../assets/ststic/images/1-1.png"
import rightImg from "../../assets/ststic/images/1-2.png"
import centerImg from "../../assets/ststic/images/1-3.png"
import data from "../../assets/ststic/data/datadaping.json"
import Mapol from "../../modules/Map2D/Map";
import "../../assets/styles/simple.scss"
import Point from "../../modules/Map2D/point";
export default class Home extends Component {
    map;
    state = {
        IconLayer: null
    }
    constructor(props) {
        super(props);
        this.map = this.props.Mapols;
        Mapol.setView(this.map, [119.816845073, 28.431519928], 10.9, 1000);
    }

    componentDidMount() {
        // document.getElementById('UIIDBY').style.background = `url(${require("../../assets/ststic/images/bg.png")})`;
        this.init()
    }

    init = () => {
        let Source = [];
        let IconLayer = null;
        data['乡镇数据'].forEach(item => {
            Source.push({
                longitude: item.po[0],
                latitude: item.po[1],
                name: item.name,
                scale: 0.4,

            })

        });

        IconLayer = Point.Icons({ Source });
        this.setState({
            IconLayer
        })
        this.map.addLayer(IconLayer)
    }
    componentWillUnmount() {
        let { IconLayer } = this.state;
        IconLayer.distroy()
    }
    render() {
        return (

            <div className={'drawer-main'} id={'UIIDBY'}
                style={{
                    pointerEvents: 'none'
                }}
            >
                <LgDrawer
                    visible={true}
                    left={<>
                        <img
                            style={{ width: "90%", marginLeft: '40px' }}
                            src={leftImg} alt=""
                        />
                    </>}
                    right={<>
                        <img
                            style={{ width: "90%" }}
                            src={rightImg} alt=""
                        />
                    </>}
                />
                <FooterCenter centerImg={centerImg} />
            </div >
        )
    }
}